<script>
import {getRegister} from '@/api/modules/login'

export default {
  name: "login",
  data() {
    return {
      params: {
        name: "",
        idCard: "",
        mobile: "",
        password: "",
        identity: 2
      },
      pattern: /1\d{10}/,
      idcard: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
      checkbox: false
    }
  },
  methods: {
    async onSubmit() {
      this.$utils.showLoading('注册中')
      const {code} = await getRegister(this.params)
      this.$utils.hideLoading()
      if (code === 0) {
        this.$utils.toast('注册成功')
        this.$router.go(-1)
      }
    }
  }
};
</script>

<template>
  <div class="login pd-16 pb-16">

    <div class="login-title flex-center">
      <span class="txt1">安全家园</span>
      <span class="txt2 size-12 ">云学苑</span>
    </div>

    <div class="login-tips flex-center">邀您登录</div>
    <div style="height: 24px"></div>
    <van-form @submit="onSubmit">
      <van-field
          v-model="params.name"
          name="name"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <div style="height: 24px"></div>
      <van-field
          v-model="params.idCard"
          name="idCard"
          placeholder="请输入身份证号"
          :rules="[
              { required: true, message: '请输入身份证号' },
              { pattern:idcard, message: '请输入正确的身份证号' }
              ]"
      />
      <div style="height: 24px"></div>
      <van-field
          v-model="params.mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="[
              { required: true, message: '请输入手机号' },
              { pattern, message: '请输入正确的手机号' }
              ]"
      />
      <div style="height: 24px"></div>
      <van-field
          v-model="params.password"
          type="password"
          name="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="height: 24px"></div>
      <div>
        <van-button color="#0a1450" block type="info" native-type="submit">注册</van-button>
      </div>


    </van-form>

    <customTabbar></customTabbar>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  min-height: 100vh;
  background-color: white;

  ::v-deep .van-field {
    background-color: #f2f3f5;
    padding: 16px 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }


  .login-title {
    .txt1 {
      font-size: 41px;
      font-weight: bold;
      color: var(--theme-txt-color);
    }

    .txt2 {
      writing-mode: vertical-rl;
      color: white;
      font-weight: bold;
      background-color: var(--theme-txt-color);
      border-radius: 2px;
      margin-left: 5px;
      padding: 2px 0;
    }


  }

  .login-tips {
    color: var(--theme-color);
    margin: 12px 0;
    font-size: 28px;

  }
}
</style>
